<script lang="ts" setup>
import {onMounted, ref} from "vue";
import Tab from "@/components/DropdownTab.vue" 

let datalist = <any>ref([])
const fillData = {
   img:'',
   title:'Vue & Vite：现状与未来 ',
   author:"cc"
}
datalist.value = Array(20).fill(fillData)

const tabs = ref()
tabs.value = [
      {title:'热门直播',active:true},
      {title:'主机游戏',active:false},
      {title:'棋牌桌游',active:false},
      {title:'角色扮演',active:false},
      {title:'休闲游戏',active:false},
      {title:'竞技游戏',active:false},
      {title:'策略游戏',active:false},
      {title:'射击游戏',active:false},
      {title:'卡牌游戏',active:false},
      {title:'娱乐天地',active:false},
      {title:'科技文化',active:false},
]

onMounted(()=>{
   
  
})

</script>

<template>

    <div style="position: sticky;top: 0px;padding: 0 30px;">
        <Tab :tabs="tabs"/>
    </div>
    <div id="scroll-wrap" style=" overflow-y: scroll;height: 100%;width: 100%;padding:0 30px;">
        <div class="grid">
            <template v-for="_,index in Array(4)">
                <div class="grid-item" :class="index === 0 ? 'video-item':'' " >
                    {{ index }}
                </div>
            </template>
        </div>

        <div v-for="tab in tabs">
            <div>
                <h4>{{tab.title}}</h4>
            </div>
            <div>
                全部 象棋
            </div>
            <div style="width:calc(100% + 14px); margin: 0 -7px;">
                <div class="wrap">
                    <div class="cards" style="position: absolute; top: 0;left: 0;">
                        <div class="img-card" v-for="(item,_index) in Array.from({length:12},()=>{ return {bg:'rgb('+Math.floor(Math.random() * 256)+','+Math.floor(Math.random() * 256)+','+ Math.floor(Math.random() * 256)+',0.05)'} }) "> 
                            <div  style="position: relative;">
                                <div style="position: absolute; left:0;top:0px; height: 100%;width:100%;padding: 7px;">
                                    <div :style="{backgroundColor:item.bg}">

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
      
</template>
<style>
    
</style>
<style scoped>
.grid{
    display: grid;
    grid-template-columns: repeat(4,1fr);
    grid-gap:1rem; 
    margin-bottom: 2rem;
}
.grid .grid-item{ 
    min-height: 20px; 
    background-color: #085dc480;
    border-radius: 0.4rem;
}
.grid .video-item{ 
    background-color: black;
    grid-column: 1/4;
    grid-row: 1/4;
    padding-top: 56%;
 }
.wrap{
    position: relative;
    width: 100%;
    box-sizing: border-box;
    --vs-card-count: 6;
    padding-top: calc((100%/var(--vs-card-count) )*1.6  );
    overflow: hidden;
    margin-bottom: 2rem;
 }
.cards{ 
    width: 100%;
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    align-content: space-between;
    overflow: hidden;
}
.img-card div{
    width: 100%; padding-top: 80%; border-radius: .4rem;
}

.img-card {
    cursor: pointer;
    --vs-card-count: 6;
    --vs-card-margin: 14px;
    width: calc(100%/var(--vs-card-count) );

    width: calc(100%/var(--vs-card-count) );
    /* margin:0 calc(var(--vs-card-margin)/2); */
}

@media (max-width: 560px) {
    .img-card {
        --vs-card-count:2
    }
    .wrap{
        --vs-card-count: 2
    }
}

@media (max-width: 1240px) and (min-width:561px) {
    .img-card {
        --vs-card-count:3
    }
    .wrap{
        --vs-card-count: 3
    }
}

@media (max-width: 1624px) and (min-width:1240px) {
    .img-card {
        --vs-card-count:4
    }
    .wrap{
        --vs-card-count: 4;
    }
}

@media (max-width: 1920px) and (min-width:1625px) {
    .img-card {
        --vs-card-count:5
    }
    .wrap{
        --vs-card-count: 5
    }
}

@media (min-width: 1920px) {
    .img-card {
        --vs-card-count:6
    }
    .wrap{
        --vs-card-count: 6
    }
}

.empty{ margin-top: 40px; width: 236px;height: 158px;background-image:url(@/assets/empty_search.png); background-size: contain; background-repeat: no-repeat;}
.user-detail .btns button{ border: none;font-size:0.875rem;background: var(--color-bg-b3) ; min-width: 5.5rem;height: 2.25rem;border-radius: 0.5rem;; line-height: 22px;}
.user-detail{width: 100%;max-width: 1208px; display: flex;flex-direction: column; }
.user-info-2{
      width: 100%;
}
.user-info-2 div{ 
}
.user-info-2 .wk{
    color: var(--color-text-t3);
    margin-right: 6px;
    font-size: 14px;
    line-height: 22px;
}

.user-info-2 .qs{
    color: var(--color-text-t1);
    font-size: 16px;
    line-height: 24px;
}
.user-info-2 div:not(:last-of-type):after {
    content: "";
    width: 0;
    height: 16px;
    border-left: 1px solid #f2f2f4;
    /* border-left: 1px solid var(--color-secondary-default); */
    margin: 0 16px;
}

</style>

